<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>摆渡村-壁纸-首页</title>
    <link rel="stylesheet" th:href="@{/css/menu.css}">
    <link rel="stylesheet" th:href="@{/css/image-view.css}">
    <link rel="stylesheet" th:href="@{/css/right.css}">
    <link rel="stylesheet" th:href="@{/css/comment.css}">
    <script rel="script" th:src="@{/js/vue.js}"></script>
</head>
<body>
<div id="app">

    <div class="nav">
        <div class="brand">
            <div class="brand-title">摆渡壁纸</div>
        </div>
        <div class="menu">
            <ul>
                <li><a th:href="@{/}">首页</a></li>
                <li><a th:href="@{/view}">浏览</a></li>
                <li><a th:href="@{/me}">我的</a></li>
            </ul>
        </div>
        <div class="user">
            <div th:if="${session.say}" class="user-login"><a th:href="@{/me}" th:text="${session.user?.userNickname}">登录</a></div>
        </div>
    </div>

    <div class="image-view" style="margin-top: 100px;">
        <div class="image-view-context">
            <div class="image-context">
                <h2 th:text="${wallView.name}" style="text-align: left;margin-top: 10px;margin-left: 15px;font-family: 幼圆,serif"></h2>
                <h5 th:text="${msg}" style="text-align: center;color: #ff0000;margin-top: 10px;"></h5>
<!--                <img th:src="@{'/get/'+${wallView.id}}" alt="view" style="margin-top: 10px;" />-->
                <img th:src="@{${wallView.BQPath}}" alt="view" style="margin-top: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;" />
            </div>
            <div class="image-view-massage">
                <a th:href="@{'/download/'+${wallView.id}}" class="download-btn" style="margin-top: 20px;">下载原图</a>
                <table class="info">
                    <tr>
                        <td style="color: #1890ff;width: 20%;">昵称</td>
                        <td style="width: 80%;" th:text="${user.userNickname}"></td>
                    </tr>
                    <tr>
                        <td style="color: #1890ff;width: 20%;">C币</td>
                        <td style="width: 80%;" th:text="${user.userMoney} + 'C币'"></td>
                    </tr>
                    <tr>
                        <td style="color: #1890ff;width: 20%;">邮箱</td>
                        <td style="width: 80%;" th:text="${user.userEmail}"></td>
                    </tr>
                </table>
                <table class="info">
                    <tr>
                        <td style="color: #1890ff;width: 20%;">价格</td>
                        <td style="width: 80%;" th:text="${wallView.price}"></td>
                    </tr>
                    <tr>
                        <td style="color: #1890ff;width: 20%;">类型</td>
                        <td style="width: 80%;" th:text="${wallView.typeName}"></td>
                    </tr>
                    <tr>
                        <td style="color: #1890ff;width: 20%;">尺寸</td>
                        <td style="width: 80%;" th:text="${wallView.size}"></td>
                    </tr>
                    <tr>
                        <td style="color: #1890ff;width: 20%;">热度</td>
                        <td style="width: 80%;" th:text="${dl}"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="comment">
        <div class="comment-context">
            <div class="write">
                <span>评论</span>
                <form th:action="@{'/comment/' + ${wallView.id}}" method="post">
                    <label>
                        <input placeholder="写下您的评论" name="comment"/>
                    </label>
                </form>
            </div>
            <div th:each="comment:${comments}" class="cmt" style="margin-top: 20px;">
                <h3 th:text="${comment.userName}"></h3>
                <p style="margin-left: 10px;color: #000c17" th:text="${comment.text}"></p>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            nav: {
                display: {
                    logo: true
                }
            }
        }
    });
</script>
</body>
</html>